<template>
  <el-row>
    <el-col :span="24">
      <el-upload
          action="/api/demo/upload"
          :on-success="uploadSuccess"
          :show-file-list="false"
      >
        <el-button type="primary">上传</el-button>
      </el-upload>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" fixed/>
        <el-table-column prop="originalFilename" label="原文件名" min-width="200"/>
        <el-table-column prop="fileName" label="文件名" min-width="200"/>
        <el-table-column prop="filePath" label="文件定位" min-width="200"/>
        <el-table-column fixed="right" label="操作" width="200">
          <template #default="scope">
            <el-button link type="primary" size="small"
                       @click.prevent="deleteRow(scope.row.id)">删除
            </el-button>
            <el-button link type="primary" size="small"
                       @click.prevent="previewRow(scope.row.id)">预览
            </el-button>
            <el-button link type="primary" size="small"
                       @click.prevent="downloadRow(scope.row.id)">下载
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import axios from 'axios'
import type {UploadProps} from 'element-plus'

const tableData = ref([])

onMounted(async () => {
  await queryList({})
})

const queryList = async (data) => {
  let result = await axios.post('/api/demo/list', data)
  tableData.value = result.data.data;
}

const uploadSuccess: UploadProps['onSuccess'] = (response: any) => {
  queryList({})
}

const deleteRow = async (id: string) => {
  let result = await axios.post('/api/demo/delete', {id: id})
  if (result.data.code === 0) {
    await queryList({})
  }
}

const previewRow = (id: string) => {
  window.open("/file/preview?id=" + id, '_blank');
}

const downloadRow = (id: string) => {
  window.open("/file/preview/download?id=" + id, '_blank');
}
</script>